<template>
	<div class="rounded bg-bg-3 py-2 px-4 flex justify-between items-center">
		<base-image :src="img"></base-image>
		<div class="text-right text-[17px] text-t-1 flex flex-col items-end">
			<div class="app-font-bold">
				<div v-if="value === null || value === undefined">~</div>
				<up-amount v-else-if="type === 'amount'" :value="value" />
				<div v-else-if="type === 'odds'">
					{{ fmtOdds(value) }}
				</div>
				<div v-else-if="type === 'number'">
					{{ fmtNum(value) }}
				</div>
				<div v-else>{{ value }}</div>
			</div>
			<base-text :text="title" :textT="titleT" class="text-sm text-t-3 app-font-normal" />
		</div>
	</div>
</template>

<script lang="ts" setup>
import { BaseImage, BaseText } from '@/components/base'
import UpAmount from '../up-amount/index.vue'
import { fmtOdds, fmtNum } from '@/utils'
defineProps({
	img: {
		type: String,
		default: ''
	},
	title: {
		type: String,
		default: ''
	},
	titleT: {
		type: String,
		default: ''
	},
	value: {
		type: [String, Number]
	},
	type: {
		type: String,
		default: 'number'
	}
})
</script>
